<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表字典类型表</title>
    <meta name="keywords" content="列表字典类型表">
    <meta name="description" content="列表字典类型表">
    <link rel="shortcut icon" href="/web/favicon.ico">
    <link href="/web/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/web/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link href="/web/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=20210202" rel="stylesheet"/>
    <link href="/web/css/animate.min.css" rel="stylesheet"/>
    <link href="/web/css/style.css?v=20200903" rel="stylesheet"/>
    <link href="/web/andy/css/ry-ui.css?v=4.6.1" rel="stylesheet"/>
    <a id="scroll-up" href="javascript:void(0);" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a>
    <script src="/web/js/jquery.min.js"></script>
    <script src="/web/js/bootstrap.min.js"></script>
    <!-- bootstrap-table 表格插件 -->
    <script src="/web/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/web/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20210202"></script>
    <script src="/web/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
    <!-- jquery-validate 表单验证插件 -->
    <script src="/web/ajax/libs/validate/jquery.validate.min.js"></script>
    <script src="/web/ajax/libs/validate/messages_zh.min.js"></script>
    <script src="/web/ajax/libs/validate/jquery.validate.extend.js"></script>
    <!-- jquery-validate 表单树插件 -->
    <script src="/web/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
    <!-- 遮罩层 -->
    <script src="/web/ajax/libs/blockUI/jquery.blockUI.js"></script>
    <script src="/web/ajax/libs/iCheck/icheck.min.js"></script>
    <script src="/web/ajax/libs/layer/layer.min.js"></script>
    <script src="/web/ajax/libs/layui/layui.js"></script>
    <script src="/web/andy/js/common.js?v=4.6.1"></script>
    <script src="/web/andy/js/andy-ui.js?v=4.6.1"></script>
    <script src="/webjars/vue/2.6.14/vue.min.js"></script>
    <link href="/web/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet"/>
    <script src="/web/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>
</head>
<body class="gray-bg">
<div id="container">
    <div class="container-div" >
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="query">
                    <div class="select-list">
                        <ul>
                            <li>
                                字典名称：<input type="text" name="dictName" value="" v-model="param.dictName"/>
                            </li>
                            <li>
                                字典类型：<input type="text" name="dictType" value="" v-model="param.dictType"/>
                            </li>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" @click="add();" >
                    <i class="fa fa-plus"></i> 新增
                </a>
                <a class="btn btn-primary" @click="edit();" :disabled="editDisable">
                    <i class="fa fa-edit"></i> 修改
                </a>
                <a class="btn btn-warning" @click="deletes();" :disabled="deleteDisable">
                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>删除
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>

    <div class="wrapper wrapper-content animated fadeInRight ibox-content" id="addForm" style="display: none">
        <form class="form-horizontal m" id="form-menu-add">
                        <input type="hidden" v-model="entity.dictId"/>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    字典名称
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.dictName" type="text"  class="form-control" name="dictName"  placeholder="字典名称">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    字典类型
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.dictType" type="text"  class="form-control" name="dictType"  placeholder="字典类型">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    状态
                                </label>
                                <div class="col-sm-7" >
                                <select v-model="entity.status" class="form-control">
                                    <option value="0">启用</option>
                                    <option value="1">禁用</option>
                                </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    备注
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.remark" type="text"  class="form-control" name="remark"  placeholder="备注">
                                </div>
                            </div>

            </form>
    </div>
</div>
</body>
<script>
    var dictType;
    let vm = new Vue({
        el:'#container',
        data:{
            datas:[],
            param:{
                visible:'',
                dictName:'',
                dictType:''
            },
            editDisable: true,
            deleteDisable: true,
            entity:{},
            typeId:''
        },
        methods:{
            edit:function(){
                let rows = $("#bootstrap-table").bootstrapTable('getSelections');
                if ($.common.isEmpty(rows) || rows.length>1) {
                    $.modal.alertWarning("请最多选择一条记录");
                    return;
                }
                $.operate.getNoAlert('/dict/sysDictType/info/'+rows[0].dictId,function(ret){
                    let data = ret.data;
                    vm.entity=data;
                    $.operate.edit(0,'addForm',doSubmit);
                });

            },
            add:function(){
                vm.entity={};
                $.operate.edit(0,'addForm',doSubmit);
            }
        },
        mounted(){
            init();
        }
    });
    function showList(id){
        dictType = id;
        $.modal.openFull_('查看列表','/dict/sysDictData?dictType='+vm.typeId);
    }
    function submitHandler(value,layero){
       layer.close(value)
    }
    function edit_(id){
        $.operate.getNoAlert('/dict/sysDictType/'+id,function(ret){
            let obj = ret.data;
            vm.entity=obj;
            $.operate.edit(0,'addForm',doSubmit);
        });

    }
    function deleteById(id){
        layer.confirm("确定删除当前数据吗？",function(){
            $.operate.delete('/dict/sysDictType/delete/'+id);
        });
    }
    function deletes(){

        let rows = $("#bootstrap-table").bootstrapTable('getSelections');
        if ($.common.isEmpty(rows) || rows.length<1) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        let ids=new Array();
        for(let i=0;i<rows.length;i++){
            ids.push(rows[i].dictId);
        }
        $.operate.deletes('/dict/sysDictType/delete',{"ids":ids});
    }
    function init(){
        var addFlag = false;
        addFlag=true;
        var editFlag = false;
        addFlag=true;
        var removeFlag = false;
        addFlag=true;
        var datas =[];
        var prefix =  "/dict/sysDictType";
        let options={
            url:'/dict/sysDictType/data',
            sortable:false,
            modalName:'字典类型',
            columns:[
                {
                    checkbox : true,
                    align : 'center'
                },
                    {
                        field:'dictId',
                        title:'字典主键',
                        align: 'center',
                        halign: 'center',
                        sortable:true
                    },
                    {
                        field:'dictName',
                        title:'字典名称',
                        align: 'center',
                        halign: 'center',
                        sortable:true
                    },
                    {
                        field:'dictType',
                        title:'字典类型',
                        align: 'center',
                        halign: 'center',
                        sortable:true
                    },
                    {
                        field:'status',
                        title:'状态',
                        align: 'center',
                        halign: 'center',
                        sortable:true,
                        formatter:function(value,row,index){
                            if(value==0){
                                return '<span class=\"label label-info\">正常</span>';
                            }
                            return '<span class=\"label label-warning\">正常</span>';
                        }
                    },
                    {
                        field:'createBy',
                        title:'创建者',
                        align: 'center',
                        halign: 'center',
                        sortable:true
                    },
                    {
                        field:'createTime',
                        title:'创建时间',
                        align: 'center',
                        halign: 'center',
                        sortable:true
                    },
                    {
                        field:'updateBy',
                        title:'更新者',
                        align: 'center',
                        halign: 'center',
                        sortable:true
                    },
                    {
                        field:'updateTime',
                        title:'更新时间',
                        align: 'center',
                        halign: 'center',
                        sortable:true
                    },
                    {
                        field:'remark',
                        title:'备注',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                {
                    title:'操作',
                    width:100,
                    align: 'center',
                    halign: 'center',
                    formatter:function (value,row,index){
                        let actions=[];
                        actions.push("<a href='javascript:void(0)' onclick=\"edit('编辑字典类型表','container','"+row.dictId+"')\" title=\"点击编辑字典类型表\"><i class=\"glyphicon glyphicon-edit\" aria-hidden=\"true\"></i></a>&nbsp;&nbsp;");
                        actions.push("<a href='javascript:void(0)' title='点击查看列表' onclick=\"showList('"+row.dictType+"')\"><i class=\"glyphicon glyphicon-list\" aria-hidden=\"true\"></i></a>&nbsp;&nbsp;");
                        actions.push("<a href='javascript:void(0)' title='点击删除字典类型表' onclick=\"deleteById('"+row.dictId+"')\"><i class=\"glyphicon glyphicon-trash\" aria-hidden=\"true\"></i></a>&nbsp;&nbsp;");
                        return actions.join("");
                    }
                }
            ]
        }
        $.table.init(options);
    }


    function doSubmit(){
        if($("#form-menu-add").valid()){
            $.operate.post("/dict/sysDictType/save",JSON.stringify(vm.entity),function(ret){
                layer.closeAll();
            });
        }
    }

</script>

<script>
    $(function(){
        var icon = "<i class='fa fa-times-circle'></i> ";
        formValidate = $("#form-menu-add").validate({
            rules:{
                dictId: "required" , 
                dictName: "required" , 
                dictType: "required" , 
                status: "required" , 
                createBy: "required" , 
                createTime: "required" , 
                updateBy: "required" , 
                updateTime: "required" , 
                remark: "required" 
            },
            messages:{
                dictId: icon + "必填" , 
                dictName: icon + "必填" , 
                dictType: icon + "必填" , 
                status: icon + "必填" , 
                createBy: icon + "必填" , 
                createTime: icon + "必填" , 
                updateBy: icon + "必填" , 
                updateTime: icon + "必填" , 
                remark: icon + "必填" 
            }
        })
    })
</script>

<script>

</script>
</html>
